<template>
    <div>
<!--                                                                         friendId接收好友id        -->
        <NavBar :title="friendInfo?.name == undefined?'':friendInfo.name" :friendId="friendId"></NavBar>
        <!-- 聊天栏-->
        <ul>
            <li :class="item.id == friendId?'you':'my'" v-for="item in chatList">
                <div class="content" v-if="item.id == friendId">
                    <div class="you-img">
                        <van-image
                            width="3.1rem"
                            height="3.1rem"
                            radius="5"
                            :src="`/api${friendInfo?.avatar}`"
                        />
                    </div>
                    <div class="information">
                        <span v-if="!item.msg.includes('/upload/image/')">{{ item.msg }}</span>
                        <van-image v-else
                                   width="100%"
                                   :src="`/api${item.msg}`"
                        />
                    </div>
                </div>
                <div class="content" v-else>
                    <div class="myInformation">
                        <span v-if="!item.msg.includes('/upload/image/')">{{ item.msg }}</span>
                        <van-image v-else
                                   width="100%"
                                   :src="`/api${item.msg}`"
                        />
                    </div>
                    <div class="my-img">
                        <van-image
                            width="3.1rem"
                            height="3.1rem"
                            radius="5"
                            :src="`/api${userInfo?.avatar}`"
                        />
                    </div>
                </div>
            </li>

        </ul>
        <SendMessage :friendId="friendId" :chatId="chatId"></SendMessage>
    </div>
</template>

<script setup lang="ts">
import NavBar from "./components/NavBar.vue";
import SendMessage from "./components/SendMessage.vue";
import {useRoute} from "vue-router";
import {useFriendStore} from "../../store/friend";
import {nextTick, onBeforeUnmount, onMounted, ref} from "vue";
import {chatType, friendChatType} from "../../type/chat";
import {FindUserResponseData, UserResponseData} from "../../type/friend";
import {useLoginStore} from "../../store/login";
import {UserInfo} from "../../type/user";


// 实例化路由
const route = useRoute()
// 获取到好友的id
const friendId: number = Number(route.query.id as string)

// 实例化仓库
const friendStore = useFriendStore()
friendStore.getChat(friendId, 1)

// 聊天列表
const chatList = ref<chatType[]>()
// 聊天的id
const chatId = ref<string>("")
// 订阅仓库
friendStore.$subscribe(async (mutation, state) => {
    chatList.value = state.friendChat?.chat.chat
    chatId.value = state.friendChat?.chat.id as string

    await nextTick()


    window.scrollTo(0, document.body.scrollHeight)

})

// 好友信息
const friendInfo = ref<UserResponseData>()
// 通过id获取到好友的信息
onMounted(async () => {
    const result = await friendStore.getFindUserById(friendId)
    friendInfo.value = result.user
    // console.log(friendInfo.value)
})

// 登陆仓库
const loginStore = useLoginStore()
loginStore.getUserInfo()

// 用户的信息
const userInfo = ref<UserInfo>()
loginStore.$subscribe((mutation, state) => {
    userInfo.value = state.user
})

// 组件销毁
onBeforeUnmount(() => {
    // 销毁会话聊天数据
    friendStore.friendChat = undefined
})
</script>

<style scoped lang="less">

ul {

    li {
        width: 90%;
        margin: 15px auto 0;

    }
}

.you {

    .content {
        display: flex;
        justify-content: left;
    }

    .information {
        padding: 0 7px 0 7px;
        background-color: #eeeeee;
        border-radius: 5%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 0.4rem;
    }

}

.my {
    display: flex;
    justify-content: right;


    .content {
        display: flex;
        justify-content: right;
    }

    .myInformation {
        border-radius: 5%;
        padding: 0 7px 0 7px;
        background-color: #eeeeee;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-right: 0.4rem;
    }

    .my-img {
        flex: 1;
    }
}
</style>